<template>
	<view class="container">
		<view class="header">
			<view class="app-header-icon" @click="toSearchView">
				<view class="icon-search el-flex">
					<image src="../../static/images/search_b.png" mode=""></image>
				</view>
				<text>搜索商品名称</text>
			</view>
		</view>
		<view class="list-navbar">
			<view class="list-ul">
				<view class="li" :class="{active:index==tabIndex}" @click="changeTab(index)"
					v-for="(item,index) in tabList" :key="index">
					<text>{{item.category_name}}</text>
				</view>
			</view>
		</view>
		<view class="swiper-container">
			<swiper :vertical='true' :style="{height:swiperHeight+'px'}" :current="tabIndex" @change="changeSwiper">
				<swiper-item v-for="(item,index) in tabList" :key="index">
					<scroll-view scroll-y="true" class="list-content" :style="{height:swiperHeight+'px'}"
						v-if="index==tabIndex">
						<template v-if="isLoading">
							<view class="el-flex" style="height: 100%;">
								<u-loading-icon size='50'></u-loading-icon>
							</view>
						</template>
						<template v-else>
							<view class="component-list-main">
								<block v-for="(i,j) in category_list" :key="j">
									<template v-if="i.view_type=='cells_auto_fill'">
										<view class="cells_auto_fill" @click="toShopDetail(i)">
											<view class="exposure items">
												<image :src="i.body.items[0].img_url" mode="widthFix"></image>
											</view>
										</view>
									</template>
									<template v-if="i.view_type=='category_title'">
										<view class="category_title">
											<text>{{i.body.category_name}}</text>
										</view>
									</template>
									<template v-if="i.view_type=='category_group'">
										<view class="category_group">
											<view class="box">
												<view class="product-row" @click="toShopDetail(child)"
													v-for="(child,childIndex) in i.body.product_list" :key="childIndex">
													<view class="exposure item">
														<image :src="child.puzzle_url" mode=""></image>
														<view class="right">
															<view class="name text">
																{{child.name}}
															</view>
															<view class="price">
																￥{{child.price}}
																<text class="qi" v-if="child.is_multi_price">起</text>
															</view>
														</view>
													</view>
												</view>
											</view>
										</view>
									</template>
									<template v-if="i.view_type=='category_group'">
										<view class="category_group ">
											<view class="box">
												<view class="product" v-for="(child,childIndex) in i.body.items"
													@click="toShopDetail(child)" :key="childIndex">
													<view class="exposure item">
														<view class="img">
															<image :src="child.img_url" mode="heightFix"></image>
														</view>
														<view class="name text-ellipsis">
															{{child.product_name}}
														</view>
													</view>
												</view>
											</view>
										</view>
									</template>
								</block>
							</view>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 1,
				swiperHeight: 0,
				tabList: [],
				category_list: [],
				idList: [],
				isLoading: false
			}
		},
		watch: {
			tabIndex: {
				handler(newVal) {
					this.isLoading = true
					this.getData(this.tabList[newVal].category_id)
				}
			},
		},
		methods: {
			toShopDetail(item) {
				let product_id = item.product_id
				if (product_id) {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${product_id}`,
					})
				} else if (item.action.path && item.action.type == "product") {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${item.action.path}`
					})
				}  else if (item.action.path && item.action.type == "cate") {
					uni.navigateTo({
						url: `/secPage/searchItemDetail/searchItemDetail?key=${item.product_name}`
					})
				} else {
					let action = item.body.items[0].action
					if (action.path && action.type == "product") {
						uni.navigateTo({
							url: `/subPage/proddetail/proddetail?id=${action.path}`,
							success() {

							}
						})
					}
				}
			},
			changeSwiper(e) {
				this.tabIndex = e.detail.current
			},
			changeTab(index) {
				this.tabIndex = index
			},
			getClientHeight() {
				const res = uni.getSystemInfoSync()
				const system = res.platform
				if (system === 'ios') {
					return 44 + res.statusBarHeight
				} else if (system === 'android') {
					return 48 + res.statusBarHeight
				} else {
					return 0
				}
			},
			toSearchView() {
				uni.navigateTo({
					url: '/secPage/searchView/searchView'
				})
			},
			getData(cat_id) {
				this.$request.get('/get_category_v2', {
					cat_id: cat_id
				}).then((res) => {
					if (!cat_id) {
						this.tabList = res.data.data
						let list = []
						this.tabList.forEach(item => {
							if (item.is_default) {
								this.category_list = item.category_list
							}
							list.push(item.category_id)
						})
						this.isLoading = false
					} else {
						this.category_list = res.data.data[0].category_list
						this.isLoading = false
					}

				}).catch(e => {
					console.log('错误了:', e)
				})
			}
		},
		onLoad() {
			this.getData()
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.swiperHeight = res.windowHeight - this.getClientHeight()
				}
			})
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		position: relative;
		max-width: 7.2rem;
		height: auto;
		overflow: hidden;
		margin: 0 auto;

		.header {
			height: .96rem;
			width: 100%;
			display: flex;
			align-items: center;
			background: #fff;
			position: fixed;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			z-index: 20;

			.app-header-icon {
				width: 6.56rem;
				height: 0.6rem;
				max-height: 100%;
				background: #f7f7f7;
				border-radius: 0.33rem;
				display: flex;
				align-items: center;
				margin-left: 0.33rem;
				color: #a6a6a6;
				font-size: .28rem;

				.icon-search {
					width: 0.72rem;
					height: 0.72rem;

					image {
						width: 0.52rem;
						height: 0.52rem;
					}
				}
			}
		}

		.list-navbar {
			position: fixed;
			top: .96rem;
			bottom: 0.9rem;
			left: 0;
			width: 1.52rem;
			overflow: hidden;
			z-index: 18;

			.list-ul {
				z-index: 90;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: -0.3rem;
				padding: 0 0.3rem 0.2rem 0;
				background: #fefefe;
				overflow-y: auto;
				-webkit-overflow-scrolling: touch;
				list-style: none;

				.li {
					font-size: .24rem;
					color: #666;
					height: 0.9rem;
					line-height: .9rem;
					text-align: center;
					-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
					position: relative;
					transition: transform .1s linear;
					transform-origin: center center;
					-webkit-transition: -webkit-transform .1s linear;
					-webkit-transform-origin: center center;

					text {
						display: block;
						height: 0.9rem;
						overflow: hidden;
					}
				}

				.active {
					color: #333;
					font-weight: 700;
					font-size: .24rem;
					transform: scale(1);
					-webkit-transform: scale(1);

					&:after {
						content: "";
						display: block;
						width: 0.05rem;
						height: 0.28rem;
						background: #ff5934;
						position: absolute;
						left: 0;
						top: 0.3rem;
					}
				}
			}
		}

		.swiper-container {
			margin-top: .96rem;
			padding-left: 1.84rem;
			padding-right: 0.32rem;

			.component-list-main {
				position: relative;

				.cells_auto_fill {}

				.category_title {
					background: #fff;
					font-size: .28rem;
					text-align: left;
					font-weight: 700;
					margin-top: 0.3rem;
					height: 0.63rem;
					line-height: .63rem;
					overflow: hidden;
					color: #333;

					text {}
				}

				.category_group {
					background: #fff;
					margin: -0.06rem 0 0;
					display: flex;

					.box {
						width: 100%;
						overflow: hidden;
						-webkit-box-flex: 1;
						flex: 1 1 auto;

						.product-row {
							width: 100%;
							background: #f8f8f8;
							border-radius: 0.1rem;
							margin-bottom: 0.16rem;

							.item {
								display: flex;
								padding: 0.07rem;

								image {

									width: 1.33rem;
									height: 1.33rem;
								}
							}

							.right {
								text-align: left;
								overflow: hidden;

								.name {
									font-size: .28rem;
									color: #333;
									margin-left: 0.09rem;
									margin-top: 0.29rem;
									white-space: nowrap;
								}

								.price {
									font-size: .3rem;
									color: #333;
									margin-top: 0.15rem;
									margin-left: 0.09rem;
									overflow: hidden;
									text-overflow: ellipsis;
									display: flex;
									height: 0.37rem;
									align-items: center;
									line-height: 1.5em;
									position: relative;

									.qi {
										font-size: .18rem;
										position: relative;
										top: 0.03rem;
									}
								}
							}
						}

						.product {
							float: left;
							width: 33.333333333333336%;
							text-align: center;
							margin-top: 0.2rem;
							margin-bottom: 0.3rem;
							overflow: hidden;

							.img {
								width: 1rem;
								height: 1rem;
								margin: 0 auto;
								background: #fff;
								overflow: hidden;

								image {
									height: 100%;
								}
							}

							.name {
								margin-top: 0.28rem;
								white-space: nowrap;
								font-size: .23rem;
								color: rgba(0, 0, 0, .54);
							}
						}
					}
				}

				.exposure {}

				.items {
					height: auto !important;
					display: block;

					image {
						display: block;
						width: 100%;
						height: auto;
					}
				}
			}
		}
	}
</style>